<template>
    <div class="infowrap3">
        <el-dialog
            v-model="dialogVisible"
            :title="editFlag?'编辑'+name:'新增'+name"
            width="570px"
            custom-class="diyclass"
        >
            <div class="mcontent">
            <div class="mchild">
                <div class="label">
                名称:
                </div>
                <el-input  
                v-model="form.value.infrastructureName"
                placeholder="请输入"  ></el-input>
                
            </div> 
            
             <div class="mchild">
                <div class="label">
                地块:
                </div>
               <el-select  v-model="form.value.plotId" class="m-2" placeholder="请选择" size="default">
                    <el-option
                    v-for="item in getPlotList"
                    :key="item.id"
                    :label="item.plotName"
                    :value="item.id"
                    />
                </el-select>
            </div>
            
            <div class="mchild">
                <div class="label">
                地址:
                </div>
                <el-input  
                v-model="form.value.address"
                 placeholder="请输入" clearable ></el-input>
            </div>
            
            <div class="mchild">
                <div class="label">
                经度:
                </div>
                <el-input  
                  type="number" 
                  v-model="form.value.lon"
                  placeholder="请输入" clearable ></el-input>
            </div>
            <div class="mchild">
                <div class="label">
                纬度:
                </div>
                <el-input 
                type="number" 
                v-model="form.value.lat"
                placeholder="请输入"  ></el-input>
            </div>
             <div class="mchild">
                <div class="label">
                添加时间:
                </div>
                <el-date-picker
                  v-model="form.value.buildTime"
                  type="date"
                  placeholder="请选择时间"
                />
               
            </div>
           
           
          
            </div>
            <template #footer>
            <span class="dialog-footer">
                <el-button :disabled="overFlag" @click="submit">提交</el-button>
                <el-button type="primary" @click="cancel">
                取消
                </el-button>
            </span>
            </template>
        </el-dialog>
    </div>
</template>       
<script lang="ts">
  import { post, get, } from "@/public/request/api";
  import { defineComponent,toRefs,computed, ref, reactive, onMounted, onUnmounted } from "vue";
  import { useRouter } from "vue-router";
  import { ElMessage } from 'element-plus'
  import moment from "moment";
  export default defineComponent({
    components: {},
    props:{
      plotList: Array,
      farmList:Array,
    },
    setup(props,{emit}) {
      let overFlag=computed({
          get(){
            if(
              form.value.address&&
              form.value.infrastructureName&&
              form.value.lat&&
              form.value.lon
             
            ){
              return false
            }else{
              return true
            }
          },
          set(value){
          }
      })
      //变量
      let name=ref('')
      const state = reactive(props);
      const { plotList,farmList } = toRefs(state);
      let getPlotList=plotList
      let getFarmList=farmList
      console.log('getPlotList',getPlotList);
      
      
      const router = useRouter();
      console.dir(router.currentRoute.value.query.id);
      
     
 
      let cropsCategoryOptions=reactive({
        value:[]
      })
      let cropsSubclassOptions=reactive({
        value:[]
      })
      let setCode=ref('SX')
      let editFlag=ref(false)
      const dialogVisible = ref(false);
      const form=reactive({
        value:{
          	"address": "",
            "buildTime": "",
            "infrastructureName": "",
            "infrastructureType": null,
            "lat": "",
            "lon": "",
            "picture": "",
            "plotId": null,
            id:null
        }
      
      })
      
      // 生命周期
      onMounted(() => {
        //
       
      });
  
      onUnmounted(() => {
        //
      });
  
      //methods
      
      
      
      
      
      function submit(){
        if(form.value.buildTime){
          form.value.buildTime=moment(form.value.buildTime).format("YYYY-MM-DD");
        }else{
          form.value.buildTime=''
        }
        
        let url=''
        if(editFlag.value){
          url='/simpleInfrastructure/edit'
        }else{
          url='/simpleInfrastructure/add'
        }
        post(url,form.value).then(res=>{
            ElMessage({
              message: editFlag.value?'编辑成功':'新增成功',
              type: 'success',
            })
            dialogVisible.value = false
            emit('getList')
          }).catch(err=>{
          console.log('err',err);
          ElMessage.error(err.message)
        })
      }
      function cancel(){
        form.value={
            "address": "",
            "buildTime": "",
            "infrastructureName": "",
            "infrastructureType": null,
            "lat": "",
            "lon": "",
            "picture": "",
            "plotId": null,
            id:null
        }
        dialogVisible.value = false
      }
      function init(val){
        if(!val){
          form.value.address=''
          form.value.buildTime=''
          form.value.infrastructureName=''
          form.value.lat=''
          form.value.lon=''
          form.value.plotId=null
          form.value.id=null
          editFlag.value=false
        }else{
          form.value.address=val.address
          form.value.buildTime=val.buildTime
          form.value.infrastructureName=val.infrastructureName
          form.value.lat=val.lat
          form.value.lon=val.lon
          if(val.plotId){
            form.value.plotId=val.plotId.toString()
          }else{
            form.value.plotId=val.plotId
          }
          
          form.value.id=val.id
          editFlag.value=true
          
          
        }
      }
      // return
      return {
        name,
        getFarmList,
        init,
        cancel,
        submit,
        overFlag,
        editFlag,
        dialogVisible,
        form,
        
        cropsCategoryOptions,
        cropsSubclassOptions,
        getPlotList,
        setCode
      };
    },
  });
  </script>
    
    <style lang="scss">
  .m-2 {
    margin: 0 !important;
  }
  .planttime{
    .el-date-editor.el-input{
          width: 530px!important;
    }
  }
  
  .infowrap3 {
      .el-input__wrapper,.el-textarea__inner{
          background: rgba(255, 255, 255, 0.08);
         box-shadow: none!important;
      }
      .el-input.is-disabled .el-input__wrapper{
        background: rgba(255, 255, 255, 0.08);
      }
      
      
    .el-select .el-input__wrapper {
      width: 535px;
      border: none !important;
      height: 33px;
      background: rgba(255, 255, 255, 0.08);
    }
    .el-select--large {
      line-height: 30px !important;
      height: 30px !important;
    }
  }
  .leftselect {
    .el-select .el-input__wrapper {
      background: rgba(255, 255, 255, 0.08) !important;
      width: 200px;
      border-radius: 200px;
      border: none !important;
    }
  }
  .dydiv2 {
  .el-input__wrapper {
    border-radius: 0 !important;
  }
  .el-input-group__prepend,
  .el-input-group__append {
    background: rgba(255, 255, 255, 0.08) !important;
    border: none !important;
    box-shadow: none !important;
  }
  .el-input-group__prepend {
    // border-top-left-radius: 100px;
    // border-bottom-left-radius: 100px;
  }
  .el-input-group__append {
    // border-top-right-radius: 100px;
    // border-bottom-right-radius: 100px;
  }
}
  </style>
  
    <style lang="scss" scoped>
  @import "@/assets/scss/index.scss";
  .addwrap{
  .ah{
    color: #fff;
    margin-bottom: 20px;
    span{
      cursor: pointer;
      color: #097fe5;
    }
  }
}
  .zywrap{
      display: flex;
      .mcontent2{
          margin-right: 20px;
      }
  }
  .picset {
    display: flex;
    align-items: center;
    .remark{
  
    }
    .xgsmall {
      margin-right: 10px;
    }
    .add {
      border-radius: 5px;
      width: 130px;
      height: 90px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(255, 255, 255, 0.08);
    }
  }
  .infowrap {
    .content4 {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
  
      .cchild {
        background: rgba(255, 255, 255, 0.08);
        border-radius: 15px;
        padding: 20px;
        width: 24%;
        margin-top: 20px;
        margin-right: 10px;
        .big {
          font-size: 20px;
        }
        .p3 {
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
          .p3child {
            width: 49%;
            display: flex;
            justify-content: space-between;
            margin-top: 20px;
            .p3label {
              color: rgba(255, 255, 255, 0.6);
            }
            .num {
              font-weight: bold;
              font-size: 20px;
            }
          }
        }
        .p2 {
          display: flex;
          justify-content: space-around;
          .text {
            margin-left: 15px;
          }
          .p2left {
            display: flex;
            align-items: center;
            .name {
              font-weight: bold;
            }
            .label {
              color: rgba(255, 255, 255, 0.6);
              font-size: 14px;
            }
          }
          .zz {
            width: 60px;
            padding: 3px;
            background: #fff;
            border-radius: 300px;
          }
        }
        .p1 {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-bottom: 20px;
          .pbtn {
            display: flex;
            align-items: center;
            .pbnt1 {
              background: rgba(9, 127, 229, 1);
              border-radius: 5px;
              font-size: 10px;
              padding: 2px 15px;
              box-sizing: border-box;
              cursor: pointer;
            }
            .pbnt2 {
              background: rgba(255, 255, 255, 0.16) !important;
              margin-left: 10px;
            }
          }
        }
      }
    }
  
    .panelben3 {
      margin-top: 20px;
    }
    .btnwrap {
      display: flex;
      flex-wrap: wrap;
      margin-top: 10px;
      width: 400px;
  
      .btnc {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-right: 20px;
        padding: 10px 14px;
        margin-top: 10px;
        border-radius: 5px;
        background: rgba(9, 127, 229, 1);
        cursor: pointer;
      }
      .icon2 {
        width: 14px;
        margin-right: 6px;
      }
    }
  
    .content2 {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 20px;
    }
    .cc {
      display: flex;
      background: rgba(255, 255, 255, 0.08);
      flex-direction: column;
      padding: 15px;
      border-radius: 10px;
      width: 19%;
      .cct2 {
        display: flex;
        font-size: 30px;
        font-weight: bold;
        margin-top: 10px;
        align-items: center;
        .icon {
          width: 50px;
          margin-right: 12px;
        }
      }
    }
  }
  </style>
    